<!-- CreateAdmin.vue -->
<template>
  <el-dialog v-model="createStore.addAdminVisible" title="新增管理员" width="40%" @closed="handleClose">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="管理员账号" prop="username">
        <el-input v-model="formData.username" />
      </el-form-item>
      <el-form-item label="管理员密码" prop="password">
        <el-input v-model="formData.password" show-password />
      </el-form-item>
      <el-form-item label="管理员名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="权限设置">
        <div class="permission-checkbox-group">
          <el-checkbox v-model="formData.can_employee">
            员工管理权限
          </el-checkbox>
          <el-checkbox v-model="formData.can_shop">
            店铺管理权限
          </el-checkbox>
          <el-checkbox v-model="formData.can_data">
            数据统计权限
          </el-checkbox>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="createStore.addAdminVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认新增</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useCreateStore } from '@/stores/useCreateStore'
import instance from '@/api'
export interface AdminForm {
  username: string
  password: string
  name: string
  can_employee: boolean
  can_shop: boolean
  can_data: boolean
}
const createStore = useCreateStore()
const emit = defineEmits(['addAdmin']);
const formRef = ref<FormInstance>()
const formData = reactive<AdminForm>({
  username: '',
  password: '',
  name: '',
  can_employee: false,
  can_shop: false,
  can_data: false
})

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
})

const handleSubmit = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  const request = {
    name: formData.name,
    username: formData.username,
    password: formData.password,
    can_employee: formData.can_employee ? 1 : 0,
    can_shop: formData.can_shop ? 1 : 0,
    can_data: formData.can_data ? 1 : 0
  }
  const resp = await instance.post('/api/newAdmin', request)
  if(resp.status === 200){
    const id = resp.data.id
    ElMessage.success('新建成功')
    const newObj = {
      ...formData,
      id,
      is_super: 0
    }
    emit('addAdmin', newObj)
  }
  createStore.addAdminVisible = false
}

const handleClose = () => {
  formRef.value?.resetFields()
  formData.can_employee = false
  formData.can_shop = false
  formData.can_data = false
}
</script>

<style scoped>
.permission-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>